import 'package:flutter/material.dart';
import '../../../widget/createNewUser.dart';
import '../../../services/colorConvert.dart';
import '../../../widget/groupSetting.dart';
import '../../../widget/createProject.dart';
import '../../../widget/createGroup.dart';
import '../../../services/screenAdapter.dart';
import '../../../widget/avatarPopupMenu.dart';

import 'package:get/get.dart';

import '../controllers/home_controller.dart';

class HomeView extends GetView {
  HomeView({super.key});
  final HomeController controller = Get.put(HomeController());

  Widget _buildTab(value) {
    return InkWell(
      onTap: () {
        controller.changeSelectedTabsIndex(value["id"]);
      },
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: value["id"] == controller.currentTabIndex.value
                  ? const Color(0xFF1890FF)
                  : Colors.transparent,
              width: ScreenAdapter.width(2),
            ),
          ),
        ),
        child: Text(
          "${value["title"]}",
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: ScreenAdapter.fontSize(16),
            color: value["id"] == controller.currentTabIndex.value
                ? Colors.black
                : const Color(0xFF666666),
          ),
        ),
      ),
    );
  }

  Widget _buildProjectListTab() {
    return Padding(
      padding: EdgeInsets.all(ScreenAdapter.width(24)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Obx(
            () => Text(
              '${controller.groupInfo['name']} 分组共（${controller.rightProjectList.length}）个项目',
              style: TextStyle(
                fontSize: ScreenAdapter.fontSize(16),
                fontWeight: FontWeight.w600,
              ),
            ),
          ),

          SizedBox(height: ScreenAdapter.height(24)),
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 6,
                crossAxisSpacing: ScreenAdapter.width(12),
                mainAxisSpacing: ScreenAdapter.height(12),
                childAspectRatio: 1.2,
              ),
              itemCount: controller.rightProjectList.length + 1,
              itemBuilder: (context, index) {
                if (index == controller.rightProjectList.length) {
                  return _buildAddProjectCard();
                }
                final project = controller.rightProjectList[index];
                return _buildProjectCard(
                  project?.projectName! as String,
                  project?.color! as String,
                  project?.id! as int,
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildProjectCard(String name, String color, int projectId) {
    return InkWell(
      borderRadius: BorderRadius.circular(12),
      onTap: () {
        // 项目卡片点击事件
        Get.toNamed('/project-main', arguments: {'projectId': projectId});
      },
      child: Padding(
        padding: EdgeInsets.all(ScreenAdapter.width(5)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 项目图标
            Container(
              width: ScreenAdapter.width(80),
              height: ScreenAdapter.width(80),
              decoration: BoxDecoration(
                color: ColorConvert.getColorFromName(color),
                shape: BoxShape.circle,
                boxShadow: [
                  BoxShadow(
                    color: ColorConvert.getColorFromName(color),
                    blurRadius: 5,
                    spreadRadius: 1,
                  ),
                ],
              ),
              child: Icon(
                Icons.computer,
                color: Colors.white,
                size: ScreenAdapter.fontSize(40),
              ),
            ),

            SizedBox(height: ScreenAdapter.height(15)),

            // 项目名称
            Text(name, style: TextStyle(fontSize: ScreenAdapter.fontSize(16))),
          ],
        ),
      ),
    );
  }

  Widget _buildAddProjectCard() {
    return Card(
      color: Colors.white,
      elevation: 2,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
        side: BorderSide(color: Colors.grey.shade300, width: 1.5),
      ),
      child: InkWell(
        borderRadius: BorderRadius.circular(12),
        onTap: () {
          Get.dialog(CreateProject());
        },
        child: Padding(
          padding: EdgeInsets.all(ScreenAdapter.width(16)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.add_circle_outline,
                size: ScreenAdapter.fontSize(40),
                color: Colors.grey,
              ),
              SizedBox(height: ScreenAdapter.height(12)),
              Text(
                '添加项目',
                style: TextStyle(
                  fontSize: ScreenAdapter.fontSize(16),
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        title: Text("Flutter Api", style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.black,
        automaticallyImplyLeading: false, //
        // centerTitle: true,
        actions: [
          IconButton(
            icon: Icon(Icons.person_add_alt_1),
            color: Colors.white,
            iconSize: ScreenAdapter.fontSize(32),
            tooltip: '添加新用户',
            onPressed: () {
              Get.dialog(CreateNewUser());
            },
          ),
          AvatarPopupMenu()
        ],
      ),
      body: Container(
        margin: EdgeInsetsDirectional.all(ScreenAdapter.width(20)),
        child: Row(
          children: [
            Expanded(
              // 左侧占30%
              flex: 2,
              child: Container(
                color: Colors.white,
                child: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.fromLTRB(
                        ScreenAdapter.width(16),
                        ScreenAdapter.height(20),
                        ScreenAdapter.width(16),
                        ScreenAdapter.height(10),
                      ),
                      child: Row(
                        crossAxisAlignment:
                            CrossAxisAlignment.center, //垂直方向上居中对齐
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            child: Obx(
                              () => Text(
                                "${controller.groupInfo['name']}",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  fontWeight: FontWeight.bold, //字体加粗
                                  fontSize: ScreenAdapter.fontSize(24),
                                ),
                              ),
                            ),
                          ),
                          SizedBox(
                            width: ScreenAdapter.width(80),
                            height: ScreenAdapter.height(80),
                            child: Tooltip(
                              message: "添加分组",
                              child: IconButton(
                                onPressed: () {
                                  Get.dialog(CreateGroup());
                                },
                                icon: Icon(
                                  Icons.folder_open,
                                  size: ScreenAdapter.fontSize(24),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(
                        ScreenAdapter.width(16),
                        0,
                        ScreenAdapter.width(16),
                        ScreenAdapter.height(10),
                      ),
                      child: Obx(
                        () => Row(
                          crossAxisAlignment:
                              CrossAxisAlignment.center, //垂直方向上居中对齐
                          children: [
                            Text(
                              "简介：",
                              style: TextStyle(
                                fontWeight: FontWeight.bold, //字体加粗
                                fontSize: ScreenAdapter.fontSize(20),
                              ),
                            ),
                            Expanded(
                              child: Text(
                                "${controller.groupInfo['desc']}",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(20),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),

                    Divider(height: ScreenAdapter.height(32)),
                    Expanded(
                      child: Obx(
                        () => controller.leftGroupList.isNotEmpty
                            ? ListView.builder(
                                itemCount: controller.leftGroupList.length,
                                itemBuilder: (context, index) {
                                  return InkWell(
                                    onTap: () {
                                      controller.changeIndex(
                                        index,
                                        controller.leftGroupList[index]!.id,
                                      );
                                    },
                                    child: Obx(
                                      () => Container(
                                        color:
                                            controller.selectIndex.value ==
                                                index
                                            ? Color(0xFF1890FF)
                                            : Colors.transparent,
                                        padding: const EdgeInsets.symmetric(
                                          vertical: 12,
                                          horizontal: 24,
                                        ),
                                        child: Row(
                                          children: [
                                            Icon(
                                              Icons.folder_special,
                                              color: Colors.amber,
                                              size: ScreenAdapter.fontSize(20),
                                            ),
                                            SizedBox(
                                              width: ScreenAdapter.width(12),
                                            ),
                                            Expanded(
                                              child: Text(
                                                "${controller.leftGroupList[index]!.groupName ?? ""}",
                                                overflow: TextOverflow.ellipsis,
                                                style: TextStyle(
                                                  fontSize:ScreenAdapter.fontSize(16),
                                                  color:controller.selectIndex.value == index
                                                      ? const Color(0xFFFFFFFF)
                                                      : Color(0xFF333333),
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  );
                                },
                              )
                            : Center(child: Text('没有分组')),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(width: ScreenAdapter.width(10)),
            Expanded(
              // 右侧占70%
              flex: 8,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 标签栏
                  Container(
                    color: Colors.white,
                    child: Obx(
                      () => Row(
                        children: controller.tabsList.map((value) {
                          return _buildTab(value);
                        }).toList(),
                      ),
                    ),
                  ),
                  Divider(height: ScreenAdapter.height(1)),

                  // 内容区域
                  Expanded(
                    child: Container(
                      color: Colors.white,
                      child: Obx(() {
                        switch (controller.currentTabIndex.value) {
                          case 1:
                            return _buildProjectListTab();
                          // case 2:
                          //   return _buildMemberListTab();
                          // case 3:
                          //   return _buildActivityTab();
                          case 4:
                            return Groupsetting();
                          default:
                            return const Center(child: Text('页面加载中'));
                        }
                      }),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
